<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/main/' }" class="a">房源基建</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/main/first' }" class="b">园区统计</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div id="piechart"></div>
        <div id="barchart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import statisticLogo from '../../../../assets/images/statisticLogo.png'
import statisticLine from '../../../../assets/images/statisticLine.png'
import {barChartData, pieChartData, spareBed} from '../../../../api/user'
export default {
  name: 'houseStatistic',
  data () {
    return {
    }
  },
  methods: {
    initPieDiv () {
      pieChartData().then(res => {
        spareBed().then(res1 => {
          let obj1 = echarts.init(document.getElementById('piechart'))
          let data1 = res.data.map(x => x.number)
          for (var i = 0; i < 4; i++) {
            if (isNaN(data1[i])) { data1[i] = 0 }
          }
          let sum1 = data1[0] + data1[1] + data1[2] + data1[3]
          let data2 = res1.data.map(x => x.number)
          if (isNaN(data2[0])) { data2[0] = 0 }
          let sum2 = data1[0] + data1[1] + data1[2] + data1[3] + data2[0]
          let option = {
            graphic: {
              elements: [
                {
                  type: 'image',
                  style: {
                    image: statisticLogo,
                    width: 20
                  },
                  left: '0.2%',
                  top: '2.8%'
                },
                {
                  type: 'image',
                  style: {
                    image: statisticLine,
                    width: 40
                  },
                  left: '48%',
                  top: '20%'
                }
              ]
            },
            title: [{
              text: '季汉',
              textStyle: { // 主标题样式
                color: '#1A1A1A',
                fontWeight: 700,
                fontSize: 16
              },
              left: '1.2%',
              top: '3%'
            },
            { // 第一个圆环标题
              text: sum1, // 主标题
              textStyle: { // 主标题样式
                color: '#000000',
                fontWeight: 700,
                fontSize: 34
              },
              left: '14.66%', // 定位到适合的位置
              top: '43%', // 定位到适合的位置
              subtext: '入住学生总数', // 副标题
              subtextStyle: { // 副标题样式
                color: '#000000',
                fontSize: 13,
                fontWeight: 400
              },
              textAlign: 'center' // 主、副标题水平居中显示
            },
            { // 第二个圆环标题
              text: sum2, // 主标题
              textStyle: { // 主标题样式
                color: '#000000',
                fontWeight: 700,
                fontSize: 34
              },
              left: '64.66%', // 定位到适合的位置
              top: '43%', // 定位到适合的位置
              subtext: '床位总数', // 副标题
              subtextStyle: { // 副标题样式
                color: '#000000',
                fontSize: 13,
                fontWeight: 400
              },
              textAlign: 'center' // 主、副标题水平居中显示
            }],
            tooltip: {
              trigger: 'item'
            },
            legend: [
              {
                orient: 'vertical',
                data: ['本科生', '硕士研究生', '博士研究生', '其他'],
                right: 1080,
                itemGap: 25,
                top: 'center',
                formatter: function (name) {
                  let arr = [name]
                  return arr.join('\n')
                }
              },
              {
                orient: 'vertical',
                data: ['本科生', '硕士研究生', '博士研究生', '其他'],
                right: 990,
                itemGap: 25,
                itemWidth: 0,
                textStyle: {
                  color: '#275CE6'
                },
                top: 'center',
                formatter: function (name) {
                  let data = option.series[0].data
                  let tarValue = 0
                  let sum = 0
                  let rate = 0.0
                  sum = data[0].value + data[1].value + data[2].value + data[3].value
                  for (let i = 0; i < data.length; i++) {
                    if (data[i].name === name) {
                      tarValue = data[i].value
                      rate = Math.round((tarValue / sum) * 10000) / 100
                    }
                  }
                  let arr = [rate + '%']
                  return arr.join('\n')
                }
              },
              {
                orient: 'vertical',
                data: ['本科生', '硕士研究生', '博士研究生', '其他'],
                right: 940,
                itemGap: 25,
                itemWidth: 0,
                textStyle: {
                  color: '#275CE6'
                },
                top: 'center',
                formatter: function (name) {
                  let data = option.series[0].data
                  let tarValue = 0
                  for (let i = 0; i < data.length; i++) {
                    if (data[i].name === name) {
                      tarValue = data[i].value
                    }
                  }
                  let arr = [tarValue]
                  return arr.join('\n')
                }
              },
              {
                orient: 'vertical',
                right: 300,
                itemGap: 25,
                data: ['本科生', '硕士研究生', '博士研究生', '其他使用', '剩余床位'],
                top: 95,
                formatter: function (name) {
                  let arr = [name]
                  return arr.join('\n')
                }
              },
              {
                orient: 'vertical',
                right: 210,
                itemGap: 25,
                itemWidth: 0,
                textStyle: {
                  color: '#275CE6'
                },
                data: ['本科生', '硕士研究生', '博士研究生', '其他使用', '剩余床位'],
                top: 95,
                formatter: function (name) {
                  let data = option.series[1].data
                  let tarValue = 0
                  let sum = 0
                  let rate = 0.0
                  sum = data[0].value + data[1].value + data[2].value + data[3].value + data[4].value
                  for (let i = 0; i < data.length; i++) {
                    if (data[i].name === name) {
                      tarValue = data[i].value
                      rate = Math.round((tarValue / sum) * 10000) / 100
                    }
                  }
                  let arr = [rate + '%']
                  return arr.join('\n')
                }
              },
              {
                orient: 'vertical',
                right: 160,
                itemGap: 25,
                itemWidth: 0,
                textStyle: {
                  color: '#275CE6'
                },
                data: ['本科生', '硕士研究生', '博士研究生', '其他使用', '剩余床位'],
                top: 95,
                formatter: function (name) {
                  let data = option.series[1].data
                  let tarValue = 0
                  for (let i = 0; i < data.length; i++) {
                    if (data[i].name === name) {
                      tarValue = data[i].value
                    }
                  }
                  let arr = [tarValue]
                  return arr.join('\n')
                }
              }],
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '55%'],
                center: ['15%', '50%'],
                avoidLabelOverlap: true,
                label: {
                  show: false,
                  position: 'center'
                },
                labelLine: {
                  show: false
                },
                data: [
                  { value: data1[0], name: '本科生', itemStyle: {color: '#539CFF'} },
                  { value: data1[1], name: '硕士研究生', itemStyle: {color: '#0AD632'} },
                  { value: data1[2], name: '博士研究生', itemStyle: {color: '#BE4BFF'} },
                  { value: data1[3], name: '其他', itemStyle: {color: '#F3C300'} }
                ]
              },
              {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '55%'],
                center: ['65%', '50%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                labelLine: {
                  show: false
                },
                data: [
                  { value: data1[0], name: '本科生', itemStyle: {color: '#539CFF'} },
                  { value: data1[1], name: '硕士研究生', itemStyle: {color: '#0AD632'} },
                  { value: data1[2], name: '博士研究生', itemStyle: {color: '#BE4BFF'} },
                  { value: data1[3], name: '其他使用', itemStyle: {color: '#F3C300'} },
                  { value: data2[0], name: '剩余床位', itemStyle: {color: '#FF4B8E'} }
                ]
              }
            ]
          }
          obj1.setOption(option)
        })
      })
    },
    initBarDiv () {
      barChartData().then(res => {
        let obj1 = echarts.init(document.getElementById('barchart'), null, {width: 1670})
        let dataAxis = res.data.map(x => x.type)
        let data = res.data.map(x => x.number)
        let option = {
          grid: {
            x: 75
          },
          graphic: {
            elements: [
              {
                type: 'image',
                style: {
                  image: statisticLogo,
                  width: 20
                },
                left: '0.2%',
                top: '2.8%'
              }
            ]
          },
          title: {
            text: '各专业入住人数',
            textStyle: { // 主标题样式
              color: '#1A1A1A',
              fontWeight: 700,
              fontSize: 16
            },
            left: '1.2%',
            top: '3%'
          },
          xAxis: {
            data: dataAxis,
            axisLabel: {
              color: '#000000'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true
            },
            z: 10
          },
          yAxis: {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#000000'
            },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          dataZoom: [
            {
              type: 'inside'
            }
          ],
          series: [
            {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#1A1A1A',
                  fontSize: 14,
                  fontWeight: 400
                }
              },
              type: 'bar',
              showBackground: false,
              barWidth: 30,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#4574ef' },
                  { offset: 1, color: '#a8c0ff' }
                ])
              },
              emphasis: {
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#2378f7' },
                    { offset: 0.7, color: '#2378f7' },
                    { offset: 1, color: '#83bff6' }
                  ])
                }
              },
              data: data
            }
          ]
        }
        obj1.setOption(option)
      })
    }
  },
  mounted () {
    this.initPieDiv()
    this.initBarDiv()
  }
}
</script>

<style scoped>
.a{
    color: #808080;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 23px;
    margin-left: 16px;
    display: inline-block;
}
.b{
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 23px;
    display: inline-block;
}
#piechart{
    margin-top: 21px;
    margin-left: 16px;
    width: calc(100% - 50px);
    height: 337px;
    border-radius: 6px;
    background: #fff;
}
#barchart{
    margin-top: 21px;
    margin-left: 16px;
    width: calc(100% - 50px);
    height: 590px;
    border-radius: 6px;
    background: #fff;
}

</style>
